<template>
  <div style="background-color: #fff; min-height: calc(100vh)">
    <van-cell title="手机号" :value="list.phone" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="state.smscode"
          center
          maxlength="6"
          clearable
          type="number"
          name="短信验证码"
          placeholder="输入验证码"
          :rules="[
            { required: true, message: '输入验证码' },
            { pattern: /^[0-9]{6}$/, message: '验证码必须为6位数字' }
          ]"
        >
          <template #button>
            <div
              style="border: 0; color: #009697"
              size="small"
              :loading="loadingSms"
              :disabled="Two"
              native-type="button"
              @click="duanxin"
            >
              | 获取验证码
              <span v-show="Two">{{ nuLL }}</span>
            </div>
          </template>
        </van-field>
        <van-field
          v-model="state.passwd"
          name="请输入新密码"
          type="password"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          v-model="state.passwd1"
          name="再次输入新密码"
          type="password"
          placeholder="再次输入新密码"
          :rules="[{ required: true, message: '再次输入新密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { savePass, getProfile } from '@/api/mine/personal'
import { Notify, Toast } from 'vant'
import { getSms } from '@/api/user'
export default {
  data() {
    return {
      value: '',
      list: {},
      state: {
        kind: 'modify'
      },
      loadingSms: false,
      nuLL: 60,
      Two: false,
      checked: true,
      code: ''
    }
  },

  computed: {},

  mounted() {
    this.fetchList()
  },

  methods: {
    // 获取首页数据
    fetchList() {
      getProfile().then(res => {
        this.list = res.data.member
      })
    },
    onSubmit() {
      if (this.passwd && this.passwd1 != this.passwd) {
        return Notify({ type: 'warning', message: '两次密码不相同' })
      }
      savePass(this.state).then(res => {
        Notify({ type: 'success', message: '密码修改成功' })
        this.$router.go(-1)
        // setTimeout(() => {
        //   this.$router.go(-1)
        // }, 1000)
      })
    },
    // 倒计时
    djshi() {
      var num = setInterval(() => {
        this.Two = true
        this.nuLL -= 1
        if (this.nuLL < 1) {
          clearInterval(num)
          if (this.nuLL < 1) {
            this.Two = false
            this.nuLL = 60
          }
        }
      }, 1000)
    },
    duanxin() {
      if (!this.list.phone) {
        return false
      }
      this.loadingSms = true
      const data = {
        phone: this.list.phone,
        behavior: 'uppasswd'
      }
      getSms(data)
        .then(res => {
          Toast({
            message: '短信发送成功，请注意查收',
            position: 'top'
          })
          this.djshi()
        })
        .catch(res => {
          Toast({
            message: res.msg,
            position: 'top'
          })
        })
        .finally(() => {
          this.loadingSms = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell-group--inset {
  margin: 0px !important;
}
::v-deep .van-cell {
  padding: 17px 15px;
  .van-cell__title,
  .van-cell__valu {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }

  .van-cell__title {
    min-width: 80px;
  }
  .van-field__error-message {
    display: none;
  }
}
.van-button {
  display: block;
  width: 95%;
  height: 45px;
  margin: 25px auto 0;
  background: #009697;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
}
</style>
